<template>
  <view>
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">身体测试报告</block>
    </cu-custom>
    <view style="width: 100%;background-color: #fff;height: 600upx;position: relative;">
      <view class="qiun-charts" style="position: absolute;top: 110upx;left: 10upx;">
        <!--#ifndef MP-ALIPAY -->
        <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" style="background-color: #fff;" @touchstart="touchIt($event,'canvasColumn')"></canvas>
        <!--#endif-->
      </view>
      <!-- <view class="msg_title">当前日期开始前十天的体重变化~</view> -->
      <view @click="jump" :data-src='"/pagesA/Physical_test/Weight_record?id="+userId' style="width: 150upx;color: #000;height: 60upx;line-height: 60upx;text-align: center;border-radius: 30upx;border: 1upx solid #000;position: absolute;right: 30upx;top: 30upx;font-size: 22upx;">
        体重记录
      </view>
    </view>
    <view style="background-color: #fff;height: 100upx;line-height: 100upx;display: flex;justify-content: space-between;padding:  0 30upx;">
      <view @click="jump" :data-src='"/pagesA/Physical_test/Physical_test?id="+userId' style="display: flex;">
        <view>
          <image style="width: 50upx;height: 50upx;border-radius: 25upx;margin-top: 25upx;margin-right: 10upx;" src="../../static/tianjia.png"
            mode=""></image>
        </view>
        <view>
          添加身体测试
        </view>
      </view>
      <!-- <view @click="jump" :data-src='"/pagesA/Physical_test/Appointment_test?id="+userId' style="width: 200upx;color: #408CE2;height: 60upx;line-height: 60upx;text-align: center;border-radius: 30upx;border: 1upx solid #408CE2;font-size: 22upx;margin-top: 20upx;">
				预约下次体测
			</view> -->
    </view>

    <!-- 身体测试报告数据 -->
    <uni-swipe-action>
      <uni-swipe-action-item v-for="(item,index) in swipeList" :options="item.options" :key="item.id" @change="swipeChange"
        @click="swipeClick($event, item.id)">
        <view @click="jump" :data-src='"/pagesA/Physical_test/Test_report_detail?id="+item.id' style="background-color: #fff;padding: 20upx;margin-top: 20upx;width: 100%;">
          <view style="height: 50upx;display: flex;justify-content: space-between;">
            <view style="font-size: 28upx;font-weight: bold;">
              身体测试报告
            </view>
            <view style="font-size: 22upx;color: #666;display: flex;line-height: 40upx;">
              <view style="padding: 0 10upx;background-color: #EFEFEF;line-height: 40upx;height: 40upx;">
                教练
              </view>
              <view style="margin-left: 30upx;">{{item.userName}}</view>
              <view style="margin-left: 30upx;">{{item.createTime}}</view>
            </view>
          </view>
          <view style="height: 50upx;">
            <view style="font-size: 22upx;color: #666;">
              <!-- <text>体重 {{item.weight}}kg</text> <text style="margin-left: 30upx;">体脂率 {{item.waistHipRatio.toFixed(1)}}%</text> -->
              <text style="margin-left: 30upx;">腰臀比 {{item.bfr}}</text>
            </view>
          </view>
        </view>
      </uni-swipe-action-item>
    </uni-swipe-action>


  </view>
</template>

<script>
  import uCharts from '../../components/u-charts/u-charts.js';
  import timeJS from '../../common/time.js';
  import uniSwipeAction from "../../components/uni-swipe-action/uni-swipe-action.vue"
  import uniSwipeActionItem from "../../components/uni-swipe-action-item/uni-swipe-action-item.vue"
  var _self;
  var canvasObj = {};
  let baseUrl = uni.getStorageSync("baseUrl");

  export default {
    components: {
      uniSwipeAction,
      uniSwipeActionItem,
    },
    data() {
      return {
        // userId: uni.getStorageSync("userId"),
        userId: 45,
        cWidth: '',
        cHeight: '',
        cWidth2: '', //横屏图表
        cHeight2: '', //横屏图表
        cWidth3: '', //圆弧进度图
        cHeight3: '', //圆弧进度图
        arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
        gaugeWidth: '', //仪表盘宽度,此设置可使各端宽度一致
        tips: '',
        pixelRatio: 1,
        serverData: '',
        itemCount: 30, //x轴单屏数据密度
        sliderMax: 50,
        data: {
          Column: {
            categories: [],
            series: [{
              data: [],
              name: "体重",
            }]
          }
        },
        swipeList: []
      }
    },
    onLoad() {
      // 获取图标横向坐标轴
      // for (var i = 9; i >= 0; i--) {
      // 	let date = timeJS.gettime.yugi(i).split('-')[2]
      // 	this.data.Column.categories.push(date)
      // }

      _self = this;
      //#ifdef MP-ALIPAY
      uni.getSystemInfo({
        success: function(res) {
          if (res.pixelRatio > 1) {
            //正常这里给2就行，如果pixelRatio=3性能会降低一点
            //_self.pixelRatio =res.pixelRatio;
            _self.pixelRatio = 2;
          }
        }
      });
      //#endif
      this.cWidth = uni.upx2px(750);
      this.cHeight = uni.upx2px(500);
      this.cWidth2 = uni.upx2px(700);
      this.cHeight2 = uni.upx2px(1100);
      this.cWidth3 = uni.upx2px(250);
      this.cHeight3 = uni.upx2px(250);
      this.arcbarWidth = uni.upx2px(24);
      this.gaugeWidth = uni.upx2px(30);

    },
    async onShow() {
      await this.getServerData();
      setTimeout(() => {
        this.fillData();
      }, 2000)
    },
    methods: {
      async getServerData() {
        uni.showLoading({
          title: "正在加载数据..."
        })
        let {
          data: {
            datas
          }
        } = await this.$myRuquest({
          url: "/coach/body/getBodyMeasurementList",
          data: {
            userId: uni.getStorageSync("phyUser").userId,
            // userId: 45,
          }
        })
        console.log('查看数据', datas)
        uni.hideLoading();
        let data = {
          categories: [],
          series: [],
        }
        let siwpers = {
          options: [{
            text: '删除',
            style: {
              backgroundColor: 'rgb(255,58,49)'
            }
          }],
          sid: 0,
          content: 'item1'
        }
        datas.forEach((item, index) => {
          // 添加图表
          if (item.createTime) data.categories.push(item.createTime.substring(item.createTime.indexOf('-') + 1))
          else data.categories.push('12-01')
          data.series.push(item.weight)
          // 添加 滑动组件
          this.swipeList = datas
        })
        this.data.Column.categories = data.categories;
        this.data.Column.series[0].data = data.series;

        this.swipeList.forEach((item, index) => {
          item.waistHipRatio = item.waistHipRatio * 100
          Object.assign(item, siwpers)
        })
      },


      fillData() {
        var data = this.data;
        console.log('查看图表数据', data)
        this.serverData = data;
        this.tips = data.tips;
        // this.sliderMax = data.Candle.categories.length;
        let Column = {
          categories: [],
          series: []
        };
        //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
        Column.categories = data.Column.categories;
        //这里的series数据是后台做好的，如果您的数据没有和前面我注释掉的格式一样，请自行拼接数据
        Column.series = data.Column.series;
        this.showColumn("canvasColumn", Column);
      },
      showColumn(canvasId, chartData) {
        canvasObj[canvasId] = new uCharts({
          $this: _self,
          canvasId: canvasId,
          type: 'column',
          padding: [15, 15, 0, 15],
          legend: {
            show: true,
            padding: 5,
            lineHeight: 11,
            margin: 0,
          },
          fontColor: '#FFFFFF',
          fontSize: 11,
          background: '#FFFFFF',
          pixelRatio: _self.pixelRatio,
          animation: true,
          // 横向底部数据
          categories: chartData.categories,
          // 横向数据
          series: chartData.series,
          xAxis: {
            disableGrid: true,
          },
          yAxis: {
            format: (val) => {
              console.log('查看', val)
              return (val).toFixed(0) + 'kg'
            },
            min: 0,
            max: 150,
          },
          dataLabel: true,
          width: _self.cWidth * _self.pixelRatio,
          height: _self.cHeight * _self.pixelRatio,
          extra: {
            column: {
              type: 'group',
              width: 20
            }
          }
        });
      },
      touchIt(e, id) {
        canvasObj[id].touchLegend(e, {
          animation: false
        });
        canvasObj[id].showToolTip(e, {
          format: function(item, category) {
            if (typeof item.data === 'object') {
              return category + ' ' + item.name + ':' + item.data.value
            } else {
              return category + ' ' + item.name + ':' + item.data
            }
          }
        });
      },
      changeData() {
        canvasObj['canvasColumn'].updateData({
          series: _self.serverData.ColumnB.series,
          categories: _self.serverData.ColumnB.categories
        });
      },

      jump(e) {
        console.log(e.currentTarget.dataset.src)
        if (e.currentTarget.dataset.src == 'Not-yet-open') {
          uni.showModal({
            title: '提示',
            content: '功能即将开放',
            showCancel: false,
            confirmColor: "#DD524D",
            success() {
              return
            }
          })
        } else {
          uni.navigateTo({
            url: e.currentTarget.dataset.src
          });
        }
      },
      swipeChange(e) {
        console.log('返回：', e);
      },
      // 删除某项
      async deleteServer(measurementId) {
        uni.showLoading({
          title: "正在删除..."
        })
        let {
          data: {
            result
          }
        } = await this.$myRuquest({
          url: "/coach/body/deleteBodyMeasurementById?measurementId=" + measurementId,
          method: "DELETE",
        })
        if (result == 200) {
          uni.showToast({
            title: '删除成功~',
            icon: "success",
            duration: 1000
          });
          this.getServerData();
          setTimeout(() => {
            this.fillData();
          }, 500);
        }
        uni.hideLoading();
      },
      swipeClick(e, id) {
        let {
          content
        } = e
        if (content.text === '删除') {
          uni.showModal({
            title: '提示',
            content: '是否删除',
            success: (res) => {
              console.log('用户点击了删除', res, id)
              this.deleteServer(id)
              if (res.confirm) {} else if (res.cancel) {
                console.log('用户点击取消');
              }
            }
          });
        }
      }
    }
  }
</script>

<style>
  page {
    width: 750upx;
    overflow-x: hidden;
  }

  .qiun-padding {
    padding: 2%;
    width: 96%;
  }

  .qiun-wrap {
    display: flex;
    flex-wrap: wrap;
  }

  .qiun-rows {
    display: flex;
    flex-direction: row !important;
  }

  .qiun-columns {
    display: flex;
    flex-direction: column !important;
  }

  .qiun-common-mt {
    margin-top: 10upx;
  }

  .qiun-bg-white {
    background: #FFFFFF;
  }

  .qiun-title-bar {
    width: 96%;
    padding: 10upx 2%;
    flex-wrap: nowrap;
  }

  .qiun-title-dot-light {
    border-left: 10upx solid #0ea391;
    padding-left: 10upx;
    font-size: 32upx;
    color: #000000
  }

  /* 通用样式 */
  .qiun-charts {
    width: 750upx;
    height: 500upx;
    background-color: #FFFFFF;
  }

  .charts {
    width: 750upx;
    height: 500upx;
    background-color: #FFFFFF;
  }

  /* 横屏样式 */
  .qiun-charts-rotate {
    width: 700upx;
    height: 1100upx;
    background-color: #FFFFFF;
    padding: 25upx;
  }

  .charts-rotate {
    width: 700upx;
    height: 1100upx;
    background-color: #FFFFFF;
  }

  /* 圆弧进度样式 */
  .qiun-charts3 {
    width: 750upx;
    height: 250upx;
    background-color: #FFFFFF;
    position: relative;
  }

  .charts3 {
    position: absolute;
    width: 250upx;
    height: 250upx;
    background-color: #FFFFFF;
  }

  .qiun-tip {
    display: block;
    width: auto;
    overflow: hidden;
    padding: 15upx;
    height: 30upx;
    line-height: 30upx;
    margin: 10upx;
    background: #ff9933;
    font-size: 30upx;
    border-radius: 8upx;
    justify-content: center;
    text-align: center;
    border: 1px solid #dc7004;
    color: #FFFFFF;
  }


  .msg_title {
    position: absolute;
    left: 80rpx;
    top: 40rpx;
  }

  .cont {
    flex: 1;
    height: 45px;
    line-height: 45px;
    padding: 0 15px;
    position: relative;
    background-color: #fff;
    font-size: 15px;
    border-bottom-color: #F5F5F5;
    border-bottom-width: 1px;
    border-bottom-style: solid;
  }
</style>
